<script setup lang="ts">
import { ref } from "vue";
import Child from "./Child.vue";
import Child1 from "./Child1.vue";

const todos = ref([
  { id: 1, title: "吃饭", done: false },
  { id: 2, title: "睡觉", done: true },
  { id: 3, title: "打豆子", done: false },
  { id: 4, title: "拉屎", done: false },
]);
</script>

<template>
  <div class="box">
    <h1>Slot</h1>
    <div class="children">
      <Child>
        <template v-slot:msg>
          <div style="color: green">天堂水，龙井茶</div>
        </template>

        <div style="color: red">你好呀</div>

        <template #foo>
          <div style="color: blue">鸡你太美</div>
        </template>
      </Child>

      <Child1 :todos="todos">
        <!-- 接收子组件作用域插槽回传的数据 -->
        <template v-slot="{ todo }">
          <del v-if="todo.done" :style="{ color: 'red' }">{{ todo.title }}</del>
          <span v-else>{{ todo.title }}</span>
        </template>
      </Child1>
    </div>
  </div>
</template>

<style scoped>
.box {
  max-width: 100%;
  min-height: 400px;
  background: bisque;
  padding: 1rem;
}
.children {
  display: flex;
  justify-content: start;
  align-items: start;
  gap: 1em;
}
</style>
